<template>
  <div>
    <el-form class="abc" inline>
      <el-form-item>
        <el-input class="input" placeholder="请输入优惠券兑换码" clearable />
      </el-form-item>

      <el-button
        type="primary"
        color="#f93684"
        style="vertical-align: top; width: 100px; height: 40px;"
      >
        兑换
      </el-button>
      <el-icon :size="20" style="margin-left: 100px;"><Paperclip /></el-icon>
      <el-form-item>
        <el-icon><Ticket /></el-icon>
        领券中心
      </el-form-item>

      <el-form-item>
        <el-icon><Ticket /></el-icon>
        历史优惠券
      </el-form-item>
    </el-form>
    <div class="warn">* 优惠券仅用于线下课</div>
    <div class="div_text">
      <span class="span">暂无数据</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'my_coupons',
})
</script>

<script setup lang="ts">
import { Ticket } from '@element-plus/icons-vue'
</script>

<style scoped>
.input {
  width: 480px;
  height: 40px;
  margin-left: 20px;
}
.abc {
  text-align: left;
}
.warn {
  text-align: left;
  margin-top: 20px;
  font-size: 14px;
  color: #dba059;
  margin-left: 20px;
}
.div_text {
  margin: 0 auto;
}
.span {
  font-size: 14px;
  padding: 20px 0px;
  color: #909399;
}
</style>
